<template>

  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="个人信息">
        <avue-form :option="option"
                   v-model="form"
                   @submit="handleSubmit"></avue-form>
      </el-tab-pane>
      <el-tab-pane label="修改密码">
        <avue-form :option="updateOption"
                   v-model="updateForm"
                   @submit="handleUpdateSubmit"></avue-form>
      </el-tab-pane>
    </el-tabs>
    <!--<basic-container>-->
    <!--&lt;!&ndash;<avue-form :option="option"&ndash;&gt;-->
    <!--&lt;!&ndash;v-model="form"&ndash;&gt;-->
    <!--&lt;!&ndash;@tab-click="handleTabClick"&ndash;&gt;-->
    <!--&lt;!&ndash;@submit="handleSubmit"></avue-form>&ndash;&gt;-->

    <!--<avue-form :option="option"-->
    <!--v-model="form"-->
    <!--@submit="handleSubmit"></avue-form>-->
    <!--</basic-container>-->
  </div>
</template>

<script>
    import {option, userInfo, password} from "@/option/user/info";
    import {getUserInfo, updateInfo, updatePassword} from "@/api/system/user";
    import md5 from 'js-md5';
    import func from "@/utils/func";
    import {mapGetters} from "vuex";
    import {resetRouter} from '@/router/index'


    export default {
        data() {
            return {
                index: 0,
                option: option,
                form: {},
                updateOption: {
                    label: '',
                    prop: 'password',
                    column: [{
                        label: '原密码',
                        span: 12,
                        row: true,
                        type: 'password',
                        prop: 'oldPassword',
                        rules: [{
                            required: true,
                            message: "请输入原密码",
                            trigger: "blur"
                        }]
                    }, {
                        label: '新密码',
                        span: 12,
                        row: true,
                        type: 'password',
                        prop: 'newPassword',
                        rules: [{
                            required: true,
                            message: "请输入新密码",
                            trigger: "blur"
                        }, {
                            pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W])[\da-zA-Z\W]{8,}$/, //大小写字母，数字，符号
                            message: "密码必须包含大小写字母，数字以及符号，长度不小于8",
                            trigger: "blur"
                        }],
                    }, {
                        label: '确认密码',
                        span: 12,
                        row: true,
                        type: 'password',
                        prop: 'newPassword1',
                        rules: [{
                            required: true,
                            message: "请输入确认密码",
                            trigger: "blur"
                        }, {
                            required: true,
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error('请再次输入密码'));
                                } else if (value !== this.updateForm.newPassword) {
                                    callback(new Error('两次输入密码不一致!'));
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }]
                    }]
                },
                updateForm: {},
                userType:""
            };
        },
        created() {
        },
        mounted() {
            this.handleWitch();
        },
        computed: {
            ...mapGetters(["permission", "userInfo"]),
        },
        methods: {
            handleSubmit(form, done) {
                if (form.oldPassword) {
                    form.oldPassword = md5(form.oldPassword);
                }
                if (form.newPassword) {
                    form.newPassword = md5(form.newPassword);
                }
                if (form.confirmPassword) {
                    form.confirmPassword = md5(form.confirmPassword);
                }
                updateInfo(form).then(res => {
                    if (res.data.success) {
                        this.userInfo.avatar = this.form.avatar;
                        this.userInfo.name = this.form.name;
                        this.userInfo.nick_name = this.form.realName;
                        this.userInfo.phone = this.form.phone;
                        this.userInfo.email = this.form.email;
                        this.form.oldPassword = "";
                        this.form.newPassword = "";
                        this.form.confirmPassword = "";
                        this.$store.commit('SET_USER_INFO', this.userInfo);
                        // this.$emit("refreshUser");
                        this.$message({
                            type: "success",
                            message: "修改信息成功!"
                        });
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.msg
                        });
                    }
                    done();
                }, error => {
                    window.console.log(error);
                    done();
                })
                // if (this.index === 0) {
                //
                // } else {
                //   updatePassword(md5(form.oldPassword), md5(form.newPassword), md5(form.newPassword1)).then(res => {
                //     if (res.data.success) {
                //       this.$message({
                //         type: "success",
                //         message: "修改密码成功!"
                //       });
                //     } else {
                //       this.$message({
                //         type: "error",
                //         message: res.data.msg
                //       });
                //     }
                //     done();
                //   }, error => {
                //     window.console.log(error);
                //     done();
                //   })
                // }
            },
            handleWitch() {
                // if (this.index === 0) {
                getUserInfo().then(res => {
                    const user = res.data.data;
                    this.userType = user.userType;
                    this.form = {
                        id: user.id,
                        avatar: user.avatar,
                        name: user.name,
                        realName: user.realName,
                        phone: user.phone,
                        email: user.email,
                    }
                });
                // }
            },
            handleTabClick(tabs) {
                this.index = func.toInt(tabs.index);

                this.handleWitch();
            },
            handleUpdateSubmit(form, done){
                updatePassword(md5(form.oldPassword), md5(form.newPassword), md5(form.newPassword1)).then(res => {
                    if (res.data.success) {
                        this.$message({
                            type: "success",
                            message: "修改密码成功!"
                        });
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.msg
                        });
                    }
                    done();
                }, error => {
                    window.console.log(error);
                    done();
                })
            }
        }
    };
</script>

<style>
</style>
